<template>
  <div class="about">
    <el-form v-if="!hasLogin" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="name">
        <el-input type="text" v-model="ruleForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
      </el-form-item>
    </el-form>
    <el-card v-else class="box-card">
      <div slot="header" class="clearfix">
        <span>用户信息</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="logout">退出登录</el-button>
      </div>
      <div class="text item">
        用户名：{{userData.name}}
      </div>
      <div class="text item">
        年龄：{{userData.age}}
      </div>
      <div class="text item">
        <el-image
          style="width: 100px; height: 100px"
          :src="userData.userImage"
          fit="cover">
        </el-image>
      </div>
    </el-card>
  </div>
</template>
<script>
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      var validateName = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          name: '',
          password: '',
        },
        rules: {
          name: [
            { validator: validateName, trigger: 'blur' }
          ],
          password: [
            { validator: validatePass, trigger: 'blur' }
          ],
        },
        hasLogin:false,
        userData:null
      };
    },
    mounted(){
      if (localStorage.getItem('token')) {
        this.hasLogin = true;
        this.userData = JSON.parse(localStorage.getItem('user'));
        this.getUserDetail(this.userData.id)
      }
    },
    methods: {
      submitForm(formName) {
        let _this = this;
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$post('/api/users/login', this.ruleForm)
            .then(function (res) {
              console.log(res)
              if(res.data.code == 1){
                _this.$notify({
                  title: '成功',
                  message: res.data.msg,
                  type: 'success'
                });
								localStorage.setItem('token',res.data.token)
								localStorage.setItem('user',JSON.stringify(res.data.data))
                _this.hasLogin = true;
                _this.userData = res.data.data
              }
            })
            .catch(function (error) {
              console.log(error);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      logout(){
        localStorage.clear();
        this.hasLogin = false
      },
      getUserDetail(id){
        this.$post('/api/users/detail', {id:id})
          .then(function (res) {
            console.log(res)
            if(res.data.code == 1){
              // _this.$message.success(res.data.msg);
              // localStorage.setItem('token',res.data.token)
              localStorage.setItem('user',JSON.stringify(res.data.result[0]))
              _this.hasLogin = true;
              _this.userData = res.data.result[0]
            }else{
              localStorage.clear()
              _this.hasLogin = false
              this.$router.push('/login')
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    }
  }
</script>
<style scoped lang='scss'>
  .about{
    width: 500px;
    height: 400px;
  }
</style>